<template>
    <div>
        <div>
            <el-card shadow="always" class="box-card">
                <el-row :gutter="20">
                    <el-col :span="3" :offset="1"><div class="grid-content bg-purple"><span>用户评论</span></div></el-col>
                    <el-col :span="9" :offset="11">
                        <div class="grid-content bg-purple">
                            <el-button size="mini" @click="suaxin">刷新</el-button>
                            <el-button size="mini" @click="returnPage">返回</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <el-card>
            <div >
                <div style="height: 50px ; padding-top: 10px">
                    <span style="float:left ; padding-top: 10px ; font-size: 16px">当前用户：{{nickname}}</span>
                </div>
                <div style="background-color: #F3F3F3 ; height: 50px ;">
                    <span style="float:left ; padding-top: 10px;font-size: 16px" ><i class="el-icon-s-unfold"></i>评论列表</span>
                    <div style="padding: 10px 10px ; float: right">
                        <el-button size="medium">显示条数 <i class="el-icon-caret-bottom"></i></el-button>
                        <el-button size="medium">排序方式 <i class="el-icon-caret-bottom"></i></el-button>
                    </div>
                    <!--           表格数据-->
                </div>
                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="courseName"
                            label="课程信息">
                    </el-table-column>
                    <el-table-column
                            prop="teacherName"
                            label="讲师">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="所属分类">
                    </el-table-column>
                    <el-table-column
                            prop="commentDate"
                            label="发言时间">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="发言内容">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" >
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="lookuser()"
                                    type="text"
                                    size="small">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--        分页-->
            <div>
                <el-pagination align='center'
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "UserComment",
        props:['id'],
        data(){
            return{
                //表格数据
                tableData: [],
                nickname:"",
                //分页
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
            }
        },
        methods:{
            returnPage(){
                if (window.history.length <= 1) {
                    this.$router.push();
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            //跟去用户id查询该用户的全部评论
            getuserid(){
                console.log(this.id)
                this.$http.get("/UserComment/getUserComment",{
                    params:{
                      userId:this.id,
                    },
                }).then(res=>{
                    // console.log(res.data.comment);
                    this.tableData=res.data.comment
                    this.nickname=res.data.comment[0].nickname
                    // console.log(res.data.comment[0].nickname)
                })
            },
        },
        mounted() {
            this.getuserid()
        }
    }
</script>

<style scoped>

</style>